<template>
    <view>
        <u-toast ref="uToast" /><u-no-network></u-no-network>
        <u-navbar title="编辑地址" safeAreaInsetTop fixed placeholder>
            <view class="coreshop-navbar-left-slot" slot="left">
                <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="22" @click="goHome"></u-icon>
            </view>
            <view slot="right">
            </view>
        </u-navbar>

        <view class="coreshop-padding-10" v-if="alert.show">
            <u-alert :title="alert.title" type="error" :description="alert.description" effect="dark"></u-alert>
        </view>

        <view class="coreshop-padding-10">
            <u--form :model="form" :rules="rules" ref="uForm" errorType="message" labelPosition="left">
                <u-form-item label="收货人" labelWidth="80" prop="name" borderBottom clearValidate>
                    <u--input v-model="form.name" placeholder="请填写收货人姓名" />
                </u-form-item>
                <u-form-item label="手机号" labelWidth="80" prop="mobile" borderBottom clearValidate>
                    <u--input v-model="form.mobile" placeholder="请填写收货人手机号" />
                </u-form-item>

                <u-form-item label="省市县" labelWidth="80" borderBottom>
                    <coreshop-select v-model="show" mode="mutil-column-auto" :list="pickerList"
                        :default-value="pickerIndex" @confirm="onConfirm"></coreshop-select>
                    <!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
                    <!-- #ifndef APP-NVUE -->
                    <u-input :value="pickerValue" type="select" disabled placeholder="请选择省市区区域">
                        <template slot="suffix">
                            <!--<u-button text="请选择" type="success" size="mini" @click="toMap"></u-button>-->
                            <u-button text="请选择" type="success" size="mini" @click="show = true"></u-button>
                        </template>
                    </u-input>
                    <!-- #endif -->
                    <!-- #ifdef APP-NVUE -->
                    <u--input :value="pickerValue" type="select" disabled placeholder="请选择省市区区域">
                        <template slot="suffix">
                            <!--<u-button text="请选择" type="success" size="mini" @click="toMap"></u-button>-->
                            <u-button text="请选择" type="success" size="mini" @click="show = true"></u-button>
                        </template>
                    </u--input>
                    <!-- #endif -->
                </u-form-item>

                <u-form-item label="街道社区" labelWidth="80" borderBottom @click="toMap">
                    <!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
                    <!-- #ifndef APP-NVUE -->
                    <u-input :value="form.street" type="text" disabled placeholder="请定位">
                        <template slot="suffix">
                            <u-button text="请选择" type="success" size="mini"></u-button>
                        </template>
                    </u-input>
                    <!-- #endif -->
                    <!-- #ifdef APP-NVUE -->
                    <u--input :value="form.street" type="text" disabled placeholder="请定位">
                        <template slot="suffix">
                            <u-button text="请选择" type="success" size="mini"></u-button>
                        </template>
                    </u--input>
                    <!-- #endif -->
                </u-form-item>

                <!--<u-form-item label="经度" prop="longitude" borderBottom>
                    <u--input v-model="form.longitude" disabled placeholder="请选择街道获取经度" />
                </u-form-item>

                <u-form-item label="纬度" prop="latitude" disabled borderBottom>
                    <u--input v-model="form.latitude" disabled placeholder="请选择街道获取纬度" />
                </u-form-item>-->

                <u-form-item label="详细地址" labelWidth="80" prop="address" borderBottom clearValidate>
                    <u--textarea v-model="form.address" placeholder="请输入内容"></u--textarea>
                    <!--<u--input  v-model="form.address" placeholder="请填写收货详细地址" type="textarea" />-->
                </u-form-item>
                <u-form-item label="设为默认" labelWidth="80">
                    <u-switch slot="right" v-model="checked"></u-switch>
                </u-form-item>
            </u--form>
        </view>

        <view class="coreshop-bottomBox">
            <button class="coreshop-btn coreshop-btn-square coreshop-btn-w" @click="delShip" v-if="id && id != 0"
                :disabled='submitStatus' :loading='submitStatus'>删除</button>
            <button class="coreshop-btn coreshop-btn-square coreshop-btn-b" @click="saveShip" :disabled='submitStatus'
                :loading='submitStatus'>保存</button>
        </view>
    </view>
</template>

<script>
// #ifdef MP-WEIXIN
const chooseLocation = requirePlugin('chooseLocation');
// #endif
// #ifdef APP-PLUS || APP-PLUS-NVUE
// #endif
export default {
    data() {
        return {
            getType: 1, //1手动输入，0从微信获取
            id: 0,
            form: {
                name: '',
                mobile: '',
                address: '',
                isDefault: 2,
                longitude: '',
                latitude: '',
                street: ''
            },
            longitude: 0,
            latitude: 0,
            region: ['湖南省', '怀化市', '鹤城区'],
            areaId: this.$store.state.config.reshipAreaId || 0,
            checked: false,
            pickerValue: '',
            submitStatus: false,
            show: false,
            pickerList: this.$db.get("areaList"),
            province: this.$db.get("areaList"),
            pickerIndex: [17, 11, 1], // picker索引值
            provinceKey: 17,//省份id
            cityKey: 11,//市id
            areaKey: 1,//区域id
            rules: {
                name: [
                    {
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur',
                    },
                    {
                        min: 2,
                        max: 10,
                        message: '姓名长度在2到10个字长',
                        trigger: ['change', 'blur'],
                    }
                ],
                address: [
                    {
                        required: true,
                        message: '请输入地址',
                        trigger: 'blur',
                    },
                    {
                        min: 5,
                        max: 50,
                        message: '地址长度在5到50个字符',
                        trigger: ['change', 'blur'],
                    }
                ],
                mobile: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: ['change', 'blur'],
                    },
                    {
                        validator: (rule, value, callback) => {
                            return this.$u.test.mobile(value);
                        },
                        message: '手机号码不正确',
                        trigger: ['change', 'blur'],
                    }
                ]
            },
            alert: {
                title: '获取定位失败，请检查是否开启定位功能。',
                description: '未获取到您的经纬度坐标，我们需要获取您的经纬度坐标，来计算与发货点的配送距离。不然无法开启同城配送计算运费。',
                closable: true,
                show: false
            },
        }
    },
    onShow() {
        // #ifdef MP-WEIXIN
        const chooseLocation = requirePlugin('chooseLocation');
        const location = chooseLocation.getLocation();
        // #endif
        // #ifdef APP-PLUS || APP-PLUS-NVUE
        const location = uni.getLocation();
        // #endif
        if (location != null) {
            this.form.latitude = location.latitude;
            this.form.longitude = location.longitude;

            this.region = [location.province, location.district, location.city];
            this.form.street = location.name;
            if (this.getType == 1) {
                this.form.address = location.address;
            }
            console.log("location1:", location);
        }
    },
    onUnload() {
        // 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
        // #ifdef MP-WEIXIN
        chooseLocation.setLocation(null);
        // #endif
        // #ifdef APP-PLUS || APP-PLUS-NVUE
        //uni.setLocation(null);
        // #endif
    },
    onLoad(e) {
        this.getMyLocation();
        if (e.shipId) {
            //编辑
            this.id = e.shipId;
            this.getShipInfo();
        } else {
            //添加（取消初始化）
            //this.pickerValue = this.region[0] + " " + this.region[1] + " " + this.region[2];
            this.init();
        }
    },
    computed: {},
    onReady() {
        this.$refs.uForm.setRules(this.rules);
    },
    methods: {
        // 获取自己的位置信息
        getMyLocation() {
            let _this = this;
            // #ifdef MP-WEIXIN
            wx.getFuzzyLocation({
                type: 'wgs84',
                success(res) {
                    _this.latitude = res.latitude
                    _this.longitude = res.longitude
                    console.log('当前位置的经度1：' + res);
                },
                fail: function () {
                    _this.$u.toast("获取您的经纬度坐标失败")
                }
            })
            // #endif
            // #ifndef MP-WEIXIN
            uni.getLocation({
                type: 'wgs84',
                success: function (res) {
                    _this.longitude = res.longitude;
                    _this.latitude = res.latitude;
                    console.log('当前位置的经度2：' + res);
                },
                fail: function () {
                    _this.$u.toast("获取您的经纬度坐标失败")
                }
            });
            // #endif
        },
        onConfirm(e) {
            //console.log(e);
            let provinceName = e[0].label;
            let cityName = e[1].label;
            let countyName = e[2].label;
            this.pickerValue = e[0].label + " " + e[1].label + " " + e[2].label
            let data = {
                provinceName: provinceName,
                provinceId: e[0].value,
                cityName: cityName,
                cityId: e[1].value,
                countyName: countyName,
                countyId: e[2].value,
            }
            this.$u.api.getAreaId(data).then(res => {
                if (res.status) {
                    this.areaId = res.data;
                    this.init();
                } else {
                    uni.showModal({
                        title: '提示',
                        content: '地区选择出现问题，请重新选择地区',
                        showCancel: false
                    });
                }
            });
        },
        //编辑获取收货地址信息
        getShipInfo() {
            let data = {
                id: this.id
            }
            this.$u.api.shipDetail(data).then(res => {
                if (res.status) {
                    let region = res.data.areaName.split(" ");
                    this.form.name = res.data.name;
                    this.form.mobile = res.data.mobile;
                    this.region = region;
                    this.areaId = res.data.areaId;
                    this.init();
                    this.pickerValue = this.region[0] + " " + this.region[1] + " " + this.region[2]
                    this.form.address = res.data.address;
                    this.form.isDefault = res.data.isDefault;
                    this.form.longitude = res.data.longitude;
                    this.form.latitude = res.data.latitude;
                    this.form.street = res.data.street;
                    if (res.data.isDefault) {
                        this.checked = true;
                        this.isDefault = 1;
                    } else {
                        this.checked = false;
                        this.isDefault = 2;
                    }
                } else {
                    this.$u.toast('获取收货地址信息出现问题');
                    // this.submitStatus = false;
                }
                this.submitStatus = false;
            });
        },
        //删除地址
        delShip() {
            this.submitStatus = true;
            this.$u.api.removeShip({ 'id': this.id }).then(res => {
                this.submitStatus = false;
                if (res.status) {
                    this.$refs.uToast.show({
                        message: res.msg, type: 'success', complete: function () {
                            uni.navigateBack({
                                delta: 1
                            });
                        }
                    })
                } else {
                    this.$u.toast(res.msg);
                    // this.submitStatus = false;
                }
            });
        },
        //存储收货地址
        saveShip() {
            this.$refs.uForm.validate().then(res => {
                console.log('验证通过');
                if (this.checked) {
                    this.form.isDefault = 1;
                } else {
                    this.form.isDefault = 2;
                }
                this.submitStatus = false;
                if (!this.form.name) {
                    this.$u.toast('请输入收货人姓名')
                    return false
                } else if (!this.form.mobile) {
                    this.$u.toast('请输入收货人手机号')
                    return false
                } else if (this.form.mobile.length !== 11) {
                    this.$u.toast('收货人手机号格式不正确')
                    return false
                } else if (this.areaId <= 0) {
                    this.$u.toast('请选择地区信息')
                    return false
                } else if (!this.form.street) {
                    this.$u.toast('请选择街道')
                    return false
                } else if (!this.form.latitude) {
                    this.$u.toast('请选择街道获取纬度')
                    return false
                } else if (!this.form.longitude) {
                    this.$u.toast('请选择街道获取经度')
                    return false
                }
                let data = {
                    name: this.form.name,
                    address: this.form.address,
                    mobile: this.form.mobile,
                    isDefault: this.form.isDefault,
                    areaId: this.areaId,
                    longitude: this.form.longitude,
                    latitude: this.form.latitude,
                    street: this.form.street,
                }
                if (this.id && this.id != 0) {
                    //编辑存储
                    data.id = this.id
                    this.$u.api.editShip(data).then(res => {
                        this.submitStatus = false;
                        if (res.status) {
                            this.$refs.uToast.show({
                                message: res.msg, type: 'success', complete: function () {
                                    uni.navigateBack({
                                        delta: 1
                                    });
                                }
                            })
                        } else {
                            this.$u.toast(res.msg);
                            // this.submitStatus = false;
                        }
                    });
                } else {
                    //添加
                    this.$u.api.saveUserShip(data).then(res => {
                        this.submitStatus = false;
                        if (res.status) {
                            this.$refs.uToast.show({
                                message: res.msg, type: 'success', complete: function () {
                                    uni.navigateBack({
                                        delta: 1
                                    });
                                }
                            })
                        } else {
                            this.$u.toast(res.msg);
                            // this.submitStatus = false;
                        }
                    });
                }
            }).catch(errors => {
                uni.$u.toast('提交的数据校验失败，请输入合法信息！')
            })
        },
        //倒查城市信息
        getFullPath(id, data) {
            for (var i = 0; i < data.length; i++) {
                if (id == data[i].value) {
                    if (!data[i].children) {
                        this.areaKey = i;
                        return true;
                    } else if (data[i].hasOwnProperty("children")) {
                        if (data[i].children[0] && !data[i].children[0].children) {
                            this.cityKey = i;
                            return true;
                        } else {
                            this.provinceKey = i;
                            return true;
                        }
                    }
                } else {
                    if (data[i].hasOwnProperty("children")) {
                        if (data[i].children[0] !== undefined) {
                            if (data[i].children[0].hasOwnProperty("children")) {
                                this.provinceKey = i;
                            } else {
                                this.cityKey = i;
                            }
                        }
                        if (typeof data[i].children != 'undefined') {
                            var res = this.getFullPath(id, data[i].children);
                            if (res) {
                                return true;
                            }
                        }
                    }
                }
            }
        },
        init() {
            this.getFullPath(this.areaId, this.province);
            this.pickerIndex = [this.provinceKey, this.cityKey, this.areaKey];
        },
        toMap() {
            const _this = this;
            // #ifdef MP-WEIXIN
            const txMapkey = this.$store.state.config.qqMapKey; //使用在腾讯位置服务申请的key
            const referer = this.$store.state.config.shopName; //调用插件的app的名称
            const location = JSON.stringify({
                latitude: this.form.latitude == "" ? this.latitude : this.form.latitude,
                longitude: this.form.longitude == "" ? this.longitude : this.form.longitude
            });
            const category = '';

            wx.navigateTo({
                url: 'plugin://chooseLocation/index?key=' + txMapkey + '&referer=' + referer + '&location=' +
                    location + '&category=' + category
            });
            // #endif
            
            // #ifdef MP-ALIPAY
            my.chooseLocation({
                latitude: this.form.latitude == "" ? this.latitude : this.form.latitude,
                longitude: this.form.longitude == "" ? this.longitude : this.form.longitude,
                success: function (res) {
                    console.log(res); 
                    _this.form.latitude = res.latitude;
                    _this.form.longitude = res.longitude;
                    _this.form.street = res.address; 
                },
                fail: function (err) {
                    console.log(err);
                }
            });
            // #endif

            // #ifdef APP-PLUS || APP-PLUS-NVUE
            uni.chooseLocation({
                success: (res) => {
                    this.form.street = res.name;
                    this.form.latitude = res.latitude;
                    this.form.longitude = res.longitude;
                }
            });
            // #endif
        }
    },

}
</script>
<style lang="scss">
page {
    background: #fff;
}
</style>